<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>transition过渡/transform变形/animation关键帧动画</title>
	</head>
	<style>
		.w_publuc-style {
			margin-bottom: 30px;
			border: 3px solid #ccc;
		}


		/* transition 过渡 */
		.w_transition {
			width: 200px;
			height: 200px;
			background-color: wheat;
			color: #333;

			transition: background 0.8s ease-in 0.3s, width 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;
			-moz-transition: background 0.8s ease-in 0.3s, width 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;
			/* Firefox 4 */
			-webkit-transition: background 0.8s ease-in 0.3s, width 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;
			/* Safari and Chrome */
			-o-transition: background 0.8s ease-in 0.3s, width 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;
			/* Opera */
		}

		.w_transition:hover {
			background: yellow;
			width: 600px;
			color: blueviolet;
		}

	
	

	

		
	</style>
	<body>
		<!-- transition 过渡 -->
		<div class="w_transition w_publuc-style">transition 过渡(正常设置)</div>



		</div>
	</body>
</html>
